<template>
  <div class="root-container">
    <div
      style="
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 12px;
      "
    >
      <VersionIndicator />
      <!-- <el-button type="info" link @click="handleRefresh" size="small">
        <el-icon :class="[isLoading ? 'is-loading' : '']"><Refresh /></el-icon>
        <span>立即更新</span>
      </el-button> -->
      <!-- <el-switch
        v-model="showAllSeat"
        inline-prompt
        style="
          --el-switch-on-color: var(--el-color-warning-light-3);
          --el-switch-off-color: var(--el-color-primary-light-3);
        "
        active-text="全部"
        inactive-text="相邻"
        size="small"
        @change="handleShowAllSeatChange"
      /> -->
      <el-radio-group
        v-model="showAllSeat"
        size="small"
        @change="handleShowAllSeatChange"
      >
        <el-radio-button :value="true">全部</el-radio-button>
        <el-radio-button :value="false">相邻</el-radio-button>
      </el-radio-group>
    </div>
    <div
      v-for="seat in status"
      class="item-container"
      :style="{
        border: `1px solid ${
          commonStore.darkMode ? seat.defaultColor : seat.color
        }`,
        borderLeft: `10px solid ${
          commonStore.darkMode ? seat.defaultColor : seat.color
        }`,
        backgroundColor: `${
          commonStore.darkMode ? seat.defaultColor : seat.color
        }10`,
      }"
    >
      <div
        class="item-container-frequency"
        :style="{
          color: commonStore.darkMode ? seat.defaultColor : seat.color,
        }"
      >
        <div class="cell cell-title" style="transform: translateY(4px)">
          {{ seat.seatName }}
        </div>
        <div class="cell cell-title" style="transform: translateY(-4px)">
          {{ seat.frequency }}
        </div>
      </div>
      <div class="item-container-detail">
        <div class="cell cell-detail">
          <el-tag
            v-for="code in seat.sectorCodes"
            size="small"
            type="info"
            class="tag-inline"
            >{{ code }}</el-tag
          >
          <el-tag
            v-if="seat.sectorCodes.length == 0"
            size="small"
            type="danger"
            class="tag-inline"
          >
            未分配扇区
          </el-tag>
        </div>
        <div class="cell cell-detail">
          <el-tag type="info" size="small">暂不提供此信息</el-tag>
          <!-- <el-tag
            v-for="user in seat.users"
            size="small"
            :type="matchType(seat.users, user)"
            :class="['tag-inline', user.seatRole == '学员' ? 'vibrate-fast' : '']"
          >
            <el-icon v-if="user.seatPost == '管制岗'"><Service /></el-icon>
            <el-icon v-else-if="user.seatPost == '协调岗'"><Phone /></el-icon>
            <el-icon v-else><View /></el-icon>
            <span>{{ user.name }}</span>
          </el-tag>
          <el-tag
            v-if="
              seat.users.filter((u) => u.seatRole != '学员' && u.seatPost == '管制岗')
                .length == 0
            "
            size="small"
            type="danger"
            class="tag-inline"
          >
            管制席未打卡
          </el-tag>
          <el-tag
            v-if="
              seat.users.filter((u) => u.seatRole != '学员' && u.seatPost == '协调岗')
                .length == 0
            "
            size="small"
            type="danger"
            class="tag-inline"
          >
            协调席未打卡
          </el-tag> -->
        </div>
        <div class="cell cell-detail">
          <el-button
            size="small"
            type="info"
            link
            @click="frequencyView.open(seat)"
            class="tag-inline"
          >
            <el-icon><Microphone /></el-icon>
            <span>频率</span>
          </el-button>
          <el-button
            size="small"
            type="info"
            link
            @click="colorView.open(seat)"
            class="tag-inline"
          >
            <el-icon><Brush /></el-icon>
            <span>颜色</span>
          </el-button>
          <el-button
            size="small"
            type="info"
            link
            class="tag-inline"
            @click="showSeatDetails(seat)"
            disabled
          >
            <el-icon><InfoFilled /></el-icon>
            <span>详情</span>
          </el-button>
        </div>
      </div>
    </div>
    <FrequencyView ref="frequencyView" />
    <ColorView ref="colorView" />
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";

import showSeatDetails from "../common/showSeatDetails.js";
import VersionIndicator from "../common/VersionIndicator.vue";
import FrequencyView from "./frequency.vue";
import ColorView from "./color.vue";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const frequencyView = ref();
const colorView = ref();

const concernedSectors = [
  "AC05",
  "AC04",
  "AC15",
  "AC16",
  "AC09",
  "AC12",
  "AC02",
  "AC08",
  "AC18",
  "AC25",
];

const concernedSeat = [
  "ACC05",
  "ACC04",
  "ACC15",
  "ACC16",
  "ACC09",
  "ACC12",
  "ACC02",
  "ACC08",
  "ACC18",
  "ACC25",
];

const isConcerned = (seat = "", codes = []) => {
  if (concernedSeat.includes(seat)) {
    return true;
  }
  for (let i = 0; i < codes.length; i++) {
    for (let j = 0; j < concernedSectors.length; j++) {
      if (codes[i] == concernedSectors[j]) {
        return true;
      }
    }
  }
  return false;
};

const isLoading = ref(false);

const handleRefresh = () => {
  isLoading.value = true;
  seatStore.refreshSeatStatusACC(true).then(() =>
    seatStore.getSeatStatusACC().then(() => {
      isLoading.value = false;
      ElMessage("区管扇区信息已更新");
    })
  );
};

const showAllSeat = ref(false);
const emits = defineEmits(["showAll"]);
const handleShowAllSeatChange = () => {
  emits("showAll", showAllSeat.value);
};

const status = computed(() => {
  let status = JSON.parse(
    JSON.stringify(
      seatStore.seatStatus.filter(
        (seat) =>
          seat.orgGroup == "ACC" &&
          seat.sectorYes &&
          seat.sectorCodes.length > 0
      )
    )
  );

  status.sort((a, b) =>
    b.orgName == a.orgName ? b.orgName - a.orgName : b.seatName - a.seatName
  );

  let notConcernedStatus = showAllSeat.value
    ? status.filter((seat) => !isConcerned(seat.seatName, seat.sectorCodes))
    : [];

  let concernedStatus = status.filter((seat) =>
    isConcerned(seat.seatName, seat.sectorCodes)
  );

  let output = new Array();
  output.push(...concernedStatus);
  output.push(...notConcernedStatus);

  return output;
});

/**
 * @users
 * [{"userName":"魏来","userId":20160032,"startTime":"2024-03-26 20:48:16","seatRole":"放单","seatRoleId":2,"seatPost":"第三岗","seatPostId":3,"qualification":"全放单","qualificationId":1,"controlLevel":"四级","controlLevelId":4},{"userName":"张宗恒","userId":20150025,"startTime":"2024-03-26 21:55:43","seatRole":"放单","seatRoleId":2,"seatPost":"带班主任岗","seatPostId":4,"qualification":"全放单","qualificationId":1,"controlLevel":"三级","controlLevelId":3},{"userName":"彭俊","userId":20050016,"startTime":"2024-03-26 23:02:04","seatRole":"放单","seatRoleId":2,"seatPost":"带班主任岗","seatPostId":4,"qualification":"全放单","qualificationId":1,"controlLevel":"二级","controlLevelId":2}]
 */

const matchType = (users, user) =>
  user.seatRole == "教员" || user.seatRole == "学员"
    ? "success"
    : users.filter((u) => u.seatPost == user.seatPost && u.seatRole == "放单")
        .length > 1
    ? "warning"
    : "info";
</script>

<style scoped>
@import "@/styles/shake.css";
@import "@/styles/vibrate.css";
@import "../common/listStyle.css";
</style>
